<template>
  <span>
    <template v-if="readonly">
      {{ value_display }}
    </template>
    <template v-else>
      todo edit: selection,{{ fieldInfo.type }}: {{ value_display }}
    </template>
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { useWidget } from './userWidget'

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { fieldInfo, readonly } = useData
const { onChange } = useData

const value_display = computed(() => {
  //   console.log(props.node)
  const { meta = {} } = props.node
  const { selection = [] } = meta
  const options = selection.reduce((acc, cur) => {
    acc[cur[0]] = cur[1]
    return acc
  }, {})
  const fname = props.node.name
  const { record = {} } = props.formInfo || {}
  const val = record[fname]
  return options[val] || val
})
</script>

<style type="text/css"></style>
